Portal.Panel = Ext.extend(Ext.util.Observable, {
	init: function(portal){
		portal.getToolbar().btGroupContent.btPanel.on('render', function(bt){
			var ds = new Ext.dd.DragSource(bt.el, {
				ddGroup: 'column'
				,afterDragDrop: function(target, e, id){
					var panel = target.el.createChild({
						tag: 'div'
						,cls: 'panel'
					});
					
					var header = panel.createChild({
						tag: 'div'
						,cls: 'title'
						,html: 'Panel Title'
					});
					
					panel.header = header;
					
					var body = panel.createChild({
						tag: 'div'
						,cls: 'content'
						,html: 'Panel Content'
					});
					
					panel.body = body;
					
					panel.createGhost = function(cls, useShim, appendTo){
						var el = document.createElement('div');
						el.className = 'x-panel-ghost ' + (cls ? cls : '');
						if(this.header){
							el.appendChild(this.dom.firstChild.cloneNode(true));
						}
						Ext.fly(el.appendChild(document.createElement('ul'))).setHeight(this.getHeight());
						el.style.width = this.dom.offsetWidth + 'px';;
						if(!appendTo){
							this.container.dom.appendChild(el);
						}else{
							Ext.getDom(appendTo).appendChild(el);
						}
						
						return new Ext.Element(el);
					};
					
					var panelDD = new Ext.ux.Panel.DD(panel, {
						ddGroup: 'column'
						
						,afterDragEnter: function(target, e, id){
							this.proxy.moveProxy(target.el.dom, null);
						}
						
						,afterDragOver: function(target, e, id){
							var items = target.el.select('.panel');
							var gY = this.proxy.getGhost().getY();
							var match = false;
							
							items.each(function(el, c, index){
								var y = el.getY();
								var height = el.getHeight();
								
								if(e.xy[1] >= y && e.xy[1] <= y + height){
									this.pos = gY < y? index + 1 : index;

									this.posEl = items.item(this.pos);
									this.proxy.moveProxy(target.el.dom, this.posEl? this.posEl.dom : null);
									match = true;
									
									return false;
								}
								
							}, this);
							
							if(!match){
								this.pos = 0;
								this.posEl = null;	
							}
						}
						
						,afterDragDrop: function(target, e, id){
							if(!this.posEl) target.el.appendChild(this.panel);
							else this.panel.insertBefore(this.posEl);
						}
					});
					
					return true;
				}	
			});
		});	
	}
});